<template>
  <div class="settlement-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/qualification' }">支付配置</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="settlement-content">
      <div class="title">
        支付配置
      </div>
      <div class="content">
        <!-- 微信 -->
        <div class="item df">
          <div class="left">
            <div class="df">
              <img src="/src/assets/system/微信支付.png" alt="" style="width:80px;margin-right:10px">
              <div>
                <div class="name">微信支付</div>
                <div class="value">
                  模式：子商户/小微商户
                </div>
                <div class="value">
                  费率：0.6%
                </div>
              </div>
            </div>
            <div class="btn">
              <el-button round color="#0071bb" @click="onApplyMerchant()">申请微信商户</el-button>
              <el-button round color="#0071bb" @click="onApplyRecord()">商户申请记录</el-button>
            </div>
          </div>
          <div class="right">
            <el-form :model="ruleForm" label-width="100" label-position="left">
              <el-form-item label="微信商户号" style="margin-bottom:10px">
                <el-input v-model="ruleForm.name" placeholder="" />
                <div class="tip">
                  微信支付官方将以邮件形式发送给您填写的邮箱
                </div>
              </el-form-item>
              <el-form-item label="支付分服务ID">
                <el-input v-model="ruleForm.name" placeholder="" />
              </el-form-item>
              <div class="save-btn">
                <el-button round color="#0071bb" @click="onSave()">保存修改</el-button>
              </div>
            </el-form>
          </div>
          <!-- 三角形 -->
          <div class="triangle">
          </div>
          <span class="triangle-text">生效</span>
        </div>
        <!-- 支付宝 -->
        <div class="item df">
          <div class="left">
            <div class="df">
              <img src="/src/assets/system/支付宝.png" alt="" style="width:80px;margin-right:10px">
              <div>
                <div class="name">支付宝支付</div>
                <div class="value">
                  模式：授权模式
                </div>
                <div class="value">
                  费率：0.6%
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <el-form style="" :model="ruleForm" label-width="80" label-position="left">
              <el-form-item label="PID" style="margin-bottom:10px;display:flex;">
                <el-button round color="#0071bb" @click="onClick()">签约支付宝当面付</el-button>
                <el-button round color="#0071bb" @click="onClick()">授权支付宝给朋友收款</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 三角形 -->
          <div class="triangle">
          </div>
          <span class="triangle-text">生效</span>
        </div>
      </div>
    </div>
    <!-- 验证 -->
    <Verify v-if="showVerify" @close="onClose()" @submit="onSubmit()"></Verify>
    <!-- 申请记录 -->
    <ApplyRecord v-if="showApplyRecord" @close="onCloseRecord()" @submit="onCloseRecord()"></ApplyRecord>
    <!-- 二维码 -->
    <Code v-if="showCode" @close="onCloseCode()" @submit="onCloseCode()"></Code>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
import Code from './components/code.vue'
import type { FormInstance, FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { ElMessage } from 'element-plus'
// 验证
import Verify from './components/verify.vue'
// 申请记录
import ApplyRecord from './components/applyRecord.vue'

interface RuleForm {
  name: string
  licenseImg: string
  permitImg: string
}
const ruleForm = reactive<RuleForm>({
  name: '',
  licenseImg: '',
  permitImg: ''
})
const onApplyMerchant = () => {
  router.push('/edit-merchant');
}
// 验证
const showVerify = ref(false)
// 保存修改
const onSave = () => {
  showVerify.value = true
}
// 修改
const onClose = () => {
  showVerify.value = false
}
// 保存
const onSubmit = () => { }
// 申请记录
const showApplyRecord = ref(false)
const onApplyRecord = () => {
  showApplyRecord.value = true
}
const onCloseRecord = () => {
  showApplyRecord.value = false
}
// 扫码登录
const showCode = ref(false)
const onClick = () => {
  showCode.value = true
}
const onCloseCode = () => {
  showCode.value = false
}
</script>

<style scoped lang="scss">
.settlement-page {
  padding: 20px 10px;
  box-sizing: border-box;
  background-color: #f1f1f1;
}

.settlement-content {
  padding: 10px;
  background: #fff;
  margin-top: 20px;
  border-radius: 4px;
}

.title {
  color: #4D4D4D;
  margin-bottom: 10px;
}

.content {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
}

.df {
  display: flex;
}

.item {
  padding: 20px 40px;
  box-sizing: border-box;
  margin-bottom: 14px;
}

.left {
  width: 40%;
}

.item {
  border: 1px solid #f0f0f0;
  position: relative;

  .name {
    margin-bottom: 10px;
    margin-top: 10px;
  }

  .value {
    color: #4D4D4D;
    font-size: 12px;

  }
}

.right {
  // width: 60%;
}

.triangle {
  width: 0;
  height: 0;
  position: absolute;
  left: -30px;
  top: -30px;
  margin: auto;
  border: 30px solid transparent;
  transform: rotate(-45deg);
  border-right: 30px solid transparent;
  border-bottom: 30px solid #faaf3b;
  border-left: 30px solid transparent;
  color: #fff;
}

.triangle-text {
  position: absolute;
  left: 2px;
  top: 4px;
  color:#fff;
  font-size:12px;
}

.tip {
  color: #989898;
  font-size: 12px;
}

.btn {
  margin-top: 44px;
}

.save-btn {
  text-align: center;
}
</style>